<template>
  <div style="padding: 20px;" class="flex-column flex-1">
    <div style="background: #fff; padding: 20px 30px;">
      <a-row>
        <a-col :span="6">
          <div class="flex-row-center" style="">
            <div class="size-14 color-000-85" style="min-width: 60px;">关键词：</div>
            <a-input-search placeholder="分组名称" @search="onSearch" v-model="keyword" :allowClear="true"
                            class="filter-common"/>
          </div>
        </a-col>

        <a-col :span="6">
          <div>
            <a-button type="primary" @click="onSearch()">查询</a-button>
            <a-button style="margin-left: 10px;" @click="reset()">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </div>


    <div style="background: #fff; padding: 20px 30px; margin-top: 20px;" class="flex-column flex-1">
      <div v-if="data && data.length">
        <div>
          <a-button type="primary" icon="plus" @click="add()">新增</a-button>
        </div>
        <a-list :data-source="data" :split="true" :pagination="paginationOpt">
          <a-list-item slot="renderItem" slot-scope="item, index">
            <div class="flex-row-center flex-1" style="padding: 10px 0;">


              <div class="flex-column flex-1">
                <div class="color-000-85 size-14">{{item.id}}</div>
                <div class="color-000-45 size-12" style="margin-top: 5px;">序号</div>
              </div>

              <div class="flex-column flex-1">
                <div class="color-000-85 size-14">{{item.packageName}}</div>
                <div class="color-000-45 size-12" style="margin-top: 5px;">套餐名称</div>
              </div>

              <div class="flex-column flex-1">
                <div class="color-000-85 size-14">{{item.packageStock}}</div>
                <div class="color-000-45 size-12" style="margin-top: 5px;">套餐库存</div>
              </div>

              <div class="flex-column" style="flex: 1.5;">
                <div class="color-000-85 size-14">{{item.packageAmount}}</div>
                <div class="color-000-45 size-12" style="margin-top: 5px;">套餐金额</div>
              </div>

              <div>
                <icon-font type="icon-edit" @click="toEdit(index)"/>
                <a-divider type="vertical"/>
                <a-popconfirm
                  title="确定要删除吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="toDelete(index)"
                >
                  <icon-font type="icon-delete" class="cursor_pointer"/>
                </a-popconfirm>
                <a-divider type="vertical"/>
                <icon-font type="icon-info" @click="goDetail(index)"/>
              </div>

            </div>
          </a-list-item>
        </a-list>
      </div>
      <mEmpty v-else-if="!data || !data.length">
        <a-button type="primary" icon="plus" @click="add">新增</a-button>
      </mEmpty>

      
    </div>

  </div>
</template>

<script>
  import mEmpty from "../../components/m-empty";
  let demoList = [
    {id:1,packageName:'套餐1',packageStock:99,packageAmount:99},
    {id:2,packageName:'套餐2',packageStock:66,packageAmount:99},
    {id:3,packageName:'套餐3',packageStock:88,packageAmount:99}
  ]
  export default {
    name: "contractList",
    components: {mEmpty},
    data() {
      let self = this;
      return {
        keyword: '',
        paginationOpt: this.$util.getTableParams((current, pageSize) => {
          self.paginationOpt.current = 1;
          self.paginationOpt.defaultPageSize = pageSize;
          console.log(11, self.paginationOpt)
          self.getList()  //显示列表的接口名称
        }, (current, size) => {
          console.log(current, size)
          self.paginationOpt.current = current
          self.paginationOpt.defaultPageSize = size
          self.getList()
        }, 6, ['6', '12']),
        data: null,
        typeList:[
          {label:'套餐类型1',value:1},
          {label:'套餐类型2',value:2},
          {label:'套餐类型3',value:3}
        ],
        type: undefined,
      }
    },
    computed: {
      getTypeColor() {
        return function (type) {
          let color = 'blue';
          if (type == 1) {
            color = 'blue';
          } else if (type == 2) {
            color = 'green';
          }
          return color;
        }
      }
    },
    mounted() {
       this.getList();
      this.$util.eventBus.$on(this.$util.notifyKey.importRefreshMessage, () => {
        this.reset();
      });
    },
    methods: {
      getList() {
        let self = this;
        let params = this.paginationOpt;
        let p = {
          start: (params.current - 1) * params.defaultPageSize,
          length: params.defaultPageSize,
          keyword: this.keyword,
        }
        if (this.type) {
          p.type = this.type;
        }
        this.$util.showLoading(self);

        //先试用测试数据
        self.data = demoList;

        //TODO 调用列表接口
        // this.$util.get('xxx', p, true).then((res) => {
        //   self.paginationOpt.total = res.recordsFiltered;
        //   this.$util.hideLoading();
        //   self.data = res.data;
        // })
        this.$util.hideLoading();
      },
      onSearch(value) {
        this.paginationOpt.current = 1;
        if (value)
          this.keyword = value;
        this.getList();
      },
      query() {
        this.getList();
      },
      reset() {
        this.paginationOpt.current = 1;
        this.keyword = '';
        this.type = undefined;
        this.getList();
      },
      typeChange(value) {
        this.type = value;
        this.paginationOpt.current = 1;
        this.getList();
      },
      goDetail(index) {
        console.log(index);
        this.$router.push('/packageInfo?packageId=' + this.data[index].id)
      },
      add() {
        this.$router.push('/addPackage')
      },
      toEdit(index) {
        this.$router.push({path: '/addPackage', query: {packageId: this.data[index].id}})
      },
      toDelete(index) {
        let p = {
          groupId: this.data[index].id
        }
        this.$util.showLoading(this);
        //TODO 调用删除接口
        // this.$util.get('xxx', p, true).then((res) => {
        //   this.$util.hideLoading();
        //   this.$message.success('删除成功');
        //   this.getList();
        // })
      },

    }
  }
</script>

<style scoped>

</style>
